﻿@model Media.Core.Models.Areas.Wizard.WizardInfoArray
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Setup/Views/Shared/_Layout.cshtml";
}
<!-- Start of the content -->
<div role="main" class="container_12" id="content-wrapper">
    <div id="main_content">
				
	    <h2 class="grid_12">Setup Wizard</h2>
	    <div class="clean"></div>
					
	    <div class="grid_12">
		    <div class="box wizard" data-step="1">
			    <div class="header">
				    <img src="@Url.Content("~/Content/Peach/img/icons/packs/fugue/16x16/application--arrow.png")" alt="" width="16"
				    height="16" />
				    <h3>Wizard</h3>
				    <span></span>
			    </div>
			    <div class="content">
				    <div class="steps">
                        <ul>
                            @for (int i = 0; i < Model.WizardBox.Count; i++)
                            {
                                <li class="@(i == 0 ? "current" : "")">
                                    <a href="@("#step_" + Model.WizardBox[i].StepNumber)"> <span>@Model.WizardBox[i].StepNumber</span>
                                        <div>
                                            <strong>@Model.WizardBox[i].TabTitle</strong>
                                            <small>
									            @Model.WizardBox[i].TabSubTitle
								            </small>
                                        </div>
                                    </a>
                                </li>
                            }
                        </ul>
				    </div>
                    @for (int i = 0; i < Model.WizardBox.Count; i++)
                    {
                        <div class="@("wiz_page step_" + Model.WizardBox[i].StepNumber)">
                            <div class="wiz_sidebar grid_3">
						        <span>@Model.WizardBox[i].StepNumber</span>
						        <div>
							        <strong>@Model.WizardBox[i].StepTitle</strong>
							        <small>
								        @Model.WizardBox[i].StepSubTitle
							        </small>
						        </div>
						        <p>
							        @(Model.WizardBox[i].StepSubInformation)
						        </p>
					        </div>
                            <div class="wiz_content grid_9">
						        <h3>@Model.WizardBox[i].StepMainTitle</h3>
						        <p>@Model.WizardBox[i].StepMainInformation</p>
					        </div>
                        </div>
                    } 
			    </div>
			    <div class="actions">
				    <div class="actions-left">
					    <button class="prev">
						    &laquo; Back
					    </button>
				    </div>
				    <div class="actions-right">
					    <button class="next">
						    Forward &raquo;
					    </button>
				    </div>
			    </div> <!-- End of .content -->
			    <div class="clear"></div>
		    </div> <!-- End of .box -->
	    </div> <!-- End of .grid_12 -->
					
    </div> <!-- End of #main_content -->
</div>